<template>
  <div>
    <h2>条件判断指令</h2>
    <!-- vue提供了两个条件判断指令，分别是 v-show 和 v-if -->

    <!-- 
      相同点：都能控制元素的隐藏和显示
    不同点：
    当条件为false的时候
    v-show是通过display：none 来让元素隐藏
    v-if直接把元素移除了，从而让元素隐藏
     -->

     <!-- 如果一个元素，经常切换他的显示隐藏状态，用 v-show 更好 -->
     <!-- 如果其实条件是false，v-show也会创建元素，创建后让元素display:none,所以v-show有更高的初始渲染代价 -->
     
    <p v-show="flag">我通过v-show控制</p>
    <p v-if="flag">我通过v-if控制</p>

  </div>
</template>

<script>
export default {
data(){
  return{
    flag:false
  }
}
}
</script>

<style>

</style>